import React from 'react'
// import Antd from 'antd'
import './TodoList.css'

class TodoItems extends React.Component {
    createTasks=(item)=> {
        return (
            <li key={item.key}>
                {item.text}
            </li>
        );
    }

    render() {
        var todoEntries = this.props.entries;
        var listItems = todoEntries.map(this.createTasks);
        return (
            <ul className="theList">
                {listItems}
            </ul>
        );
    }
}

class TodoList extends React.Component {
    // getInitialState() {
    //     return {
    //         items: []
    //     };
    // }
    state = {
        items: []
    }

    addItem=(e)=> {
        var itemArray = this.state.items;
        itemArray.push(
            {
                text: this._inputElement.value,
                key: Date.now()
            }
        );
        this.setState({
            items: itemArray
        });
        this._inputElement.value = "";
        e.preventDefault();
    }

    render() {
        return (
            <div className="todoListMain">
                <div className="header">
                    <form onSubmit={this.addItem}>
                        <input ref={(a) => this._inputElement = a}
                            placeholder="enter task"></input>
                        <button type="submit">add</button>
                    </form>
                </div>
                <TodoItems entries={this.state.items} />
            </div>
        );

    }
}

export default TodoList;